<template>
  <div class="vp-raw w-full">
    <Grid>
      <template #toolbar-actions>
        <div style="display: flex;gap: 5px;align-items: center;">
          <VbenButton>按钮1</VbenButton>
          <VbenButton>按钮2</VbenButton>
        </div>

      </template>
      <template #toolbar-tools>
        <div style="margin-right:-60px">
          <RadioGroup button-style="solid" style="width:200px">
            <RadioButton value="field1">字段1</RadioButton>
            <RadioButton value="field2">字段2</RadioButton>
          </RadioGroup>
        </div>
      </template>
    </Grid>
  </div>
</template>

<script setup lang='ts'>
//@ts-ignore
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getUserListApi } from "#/api/example/index.ts";

import { Button, Upload, RadioButton, RadioGroup } from "ant-design-vue";
import { ElMessage, ElMessageBox,ElUpload,ElDialog,ElButton,ElLoading,ElTag,ElDatePicker } from "element-plus";
import { useVbenModal, VbenButton } from "@vben/common-ui";
import { dealVxeGridFilterParameter } from "#/utils/tools.ts";


const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '输入框搜索',
        style: { width: "220px" },
      },
      defaultValue: '',
      fieldName: 'field1',
      label: '输入框'
    },
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        options: [{ label:"选项1",value:'001' },{ label:"选项2",value:'002' }],
        placeholder: '请选择',
        style: { width: "220px" },
      },
      fieldName: 'field2',
      label: '下拉框',
    },
    {
      component: 'DatePicker',
      componentProps:{
        style: { width: "220px" },
      },
      fieldName: 'field3',
      label: '日期',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
  // 是否在字段值改变时提交表单
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions: VxeGridProps = {
  columns: [
    { title: '序号', type: 'seq',align:'center', width: 120 },
    { title: 'id', field: 'id',align:'center', width:''},
    { title: '姓名', field:'name',align:'center', width:''},
    { title: '性别', field:'sex',align:'center', width:''},
    { title: '角色', field:'role',align:'center', width:''},
    { title: '年龄', field:'age',align:'center', width:''},
    { title: '住址', field:'address',align:'center', width:''}
  ],
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  filterConfig: {
    remote: true
  },
  keepSource: true,
  pagerConfig: {
    enabled: true,
    pageSize: 10,
    pageSizes: [10,20,30,50,100]
  },
  toolbarConfig: {
    search: true,
    custom: true,
    export: true,
    refresh: true,
    zoom: true
  },
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        try {
          const params = {
            page: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
          };
          const response = await getUserListApi(params);
          console.log("请求用户列表信息api",response);
          return { items:response.data.items,total:response.data.total };
        } catch(error) {
          console.log("请求用户列表信息api",error);
          return { items:[],total:0 };
        }
      },
    },
  }
};
const gridEvents = {
  filterChange({ filterList }) {
    console.log("filterList", filterList);
    console.log(dealVxeGridFilterParameter(filterList));
  }
};
const [Grid,VxeGridApi] = useVbenVxeGrid({ formOptions, gridOptions,gridEvents });
</script>

<style lang='scss' scoped>

</style>